Button = {}

local onPressed = function (self)
    self.subStyle = "pressed"
end
local function onReleased(self)
    if self.subStyle == "pressed" then
        self.subStyle = "none"
        self:emit(NodeEvent.OnClick, self)
    end
end
function Button:ctor()
    self.interactable = true
    self:onPressed(onPressed, self)
    self:onReleased(onReleased, self)
end
function Button:onClick(fn, caller)
    self:on(NodeEvent.OnClick, fn, caller)
end

function Button:offClick(fn, caller)
    self:off(NodeEvent.OnClick, fn, caller)
end
function Node.Button(str)
    local node = Node.Scale9("roundedBox48"):addComponent(Button)
    node.name = "button"
    node:addComponent(HoverArea)
    node.style = Styles.button
    
    node:wh(200, 30)
    local label = Node.Label(str or "button"):addTo(node)
    label.interactable = false
    label:addComponent(Align)
    label.styleTarget = node
    label.style = Styles.buttonLabel
    node.label = label

    local border = Node.Scale9("roundedBorder48"):addTo(node)
    border.name = "buttonBorder"
    border:addComponent(Stretch)
    border.interactable = false
    border.styleTarget = node
    border.style = Styles.buttonLabel
    node.border = border
    return node
end